make an "add as friend" web component#826
Conversation
There was a problem hiding this comment.
Pull request overview
Introduces a new solid-ui-button-add-friend web component by extracting the “add as friend” behavior into a reusable component, along with supporting helpers, styling, and a Storybook story.
Changes:
- Added
ButtonAddFriendweb component that checks login state, detects existing friendships, and performs the FOAFknowsmutation. - Added helper to ensure standard RDF prefixes are registered for rdflib mutations.
- Added component styling and a Storybook story for basic states.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| src/components/button-add-friend/index.ts | Barrel export for the new add-friend component. |
| src/components/button-add-friend/helpers.ts | Adds prefix-registration helper used before rdflib updates. |
| src/components/button-add-friend/ButtonAddFriend.ts | Implements the add-friend web component and mutation logic. |
| src/components/button-add-friend/ButtonAddFriend.styles.css | Styles the inline status banner shown on error. |
| src/components/button-add-friend/ButtonAddFriend.stories.ts | Storybook coverage for guest/logged-in/friend-exists states. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
SharonStrats
force-pushed
the
feat/add-friends-component
branch
2 times, most recently
from
2253b1e to
69ec36f
Compare
SharonStrats
force-pushed
the
feat/add-friends-component
branch
from
69ec36f to
ab67365
Compare
Prompt: Create stories for ButtonAddFriend for guest, loggedin and FriendExists follow the stories in the Component directory Co-authored-by: GPT-5.4 Mini <gpt-5.4-mini@openai.com>
|
Looks ok to me, but I would appreciate Noels review. |
NoelDeMartin
left a comment
NoelDeMartin
left a comment
There was a problem hiding this comment.
I think the general direction is ok, but there are a couple of things that should be improved to make this more "idiomatic".
Also, regarding the name, maybe it should be called "add-friend-button" instead? I worry this is too specific to be in the generic solid-ui package, but I understand we're doing this to use it in two different panes so I guess it's ok. Whenever we prepare developer documentation, we should probably make sure that this type of component is in a different section or something (also using storybook groups, etc.).
| @property({ attribute: false }) | ||
| accessor context: DataBrowserContext | undefined = undefined |
There was a problem hiding this comment.
We shouldn't be passing the context as an attribute, it should be a context provided by a parent component. We already do this with the auth context, so we could reuse that one or create a dedicated one for the store.
Timea has been working on this, and she's leaning more towards having a separate "StoreContext". Check it out in her PR, as they should both follow the same approach: #798
There was a problem hiding this comment.
I should probably wait until Timea merges that PR then so i can use the store she added.
| @property({ attribute: false }) | ||
| accessor buttonLabel = addMeToYourFriendsButtonText |
There was a problem hiding this comment.
Maybe this should be state rather than a property... Or seeing that this is derived from other state, maybe it could just be a getter that we call in the render.
There was a problem hiding this comment.
it depends on async work for refresh so i'm going to change it to state instead of a getter.
| accessor buttonLabel = addMeToYourFriendsButtonText | ||
|
|
||
| @property({ attribute: false }) | ||
| accessor statusMessage = '' |
There was a problem hiding this comment.
Again, this should probably be state, not a property.
There was a problem hiding this comment.
sorry yes i understand now.
…at/add-friends-component
…istry@3.1.2-2) (latest: rdflib@2.4.0)
This moves over the code from profile-pane for adding as a friend and creates a Web Component from the code.